<!--产品细节-->
<template>
    <div>
        <!--      {{ details }}-->
        <el-row justify="space-evenly" align="middle">
            <el-col :span="1">
                <bar-icon style="padding-left: 30px; cursor:pointer;" @click="handleGetBack" :icon="'back'" :height="20"
                          :width="20" :color="'#a8a8a8'"/>
            </el-col>
            <el-col :span="4">
                <el-row>
                    <el-col :span="4">
                        <bar-icon icon="fileDictionary" :width="50" :height="50"/>
                    </el-col>
                    <el-col :span="20">
                        <span style="padding-left: 10px;text-align: center;font-size: 20px;font-weight:600;color: #1c1f2a;line-height: 45px">{{
                            details.name
                            }}</span>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="12">

            </el-col>
            <el-col :span="6">
                <div style="display: flex;justify-items: center">
                    <el-button type="primary">领料</el-button>
                    <el-button type="primary">退料</el-button>
                    <el-button type="primary" plain>入库</el-button>
                    <el-button type="primary" plain>完工</el-button>
                    <el-button>打印</el-button>
                    <el-button>删除</el-button>
                </div>
            </el-col>
        </el-row>
        <div style="margin-left: 40px;margin-right: 40px;margin-top: 40px;">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="工单信息" name="ticket">
                    <el-carousel indicator-position="outside" :autoplay="false" height="600px">
                        <el-carousel-item v-for="(item,index) in productDetailInfos.order.length" :key="index">
                            <ticket
                                    :orders="productDetailInfos.order"
                                    :plans="productDetailInfos.plan"
                                    :idx="index"
                            />
                        </el-carousel-item>
                    </el-carousel>
                </el-tab-pane>
                <el-tab-pane label="用料清单" name="material">用料清单</el-tab-pane>
                <el-tab-pane label="供应商" name="support">供应商</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import BarIcon from '../../widget/icon/BarIcon.vue'
import Ticket from './Ticket.vue'
import mdApi from '../../../util/request.js'
export default {
    emits: ['getBack'],
    props: ['details'],
    components: {
        BarIcon,
        Ticket,
    },
    data() {
        return {
            activeName: 'ticket',
            productDetailInfos: {
                bom: [

                ],//物料组成
                order: [
                    {
                        customerName: '小可怎么都睡不够',
                        orderId: 'DD001238',
                        productOrderId: 'SC1001',
                        productSpecification: '30*125',
                        employeeName: '赵经理',
                        drawingUrl: '图纸1',
                        idUrgent: '0',//是否加急 0:不急 1:加急
                        deliveryDate: '2025-01-01',
                        remark: '只最求质量',
                    },
                    {
                        customerName: '小可怎么都睡不够',
                        orderId: 'DD001239',
                        productOrderId: 'SC1001',
                        productSpecification: '30*125',
                        employeeName: '赵经理',
                        drawingUrl: '图纸1',
                        idUrgent: '0',//是否加急 0:不急 1:加急
                        deliveryDate: '2025-01-01',
                        remark: '只最求质量',
                    },
                    {
                        customerName: '小可怎么都睡不够',
                        orderId: 'DD001240',
                        productOrderId: 'SC1001',
                        productSpecification: '30*125',
                        employeeName: '赵经理',
                        drawingUrl: '图纸1',
                        idUrgent: '0',//是否加急 0:不急 1:加急
                        deliveryDate: '2025-01-01',
                        remark: '只最求质量',
                    },
                ],//工单
                plan: [
                    {
                        orderStatus: '1',
                        plannedDate: '2025-01-01',
                        completionDate: '2025-01-01',
                        completionQuantity: '1000',
                        plannedQuantity: '2500',
                    },
                    {
                        orderStatus: '1',
                        plannedDate: '2025-01-01',
                        completionDate: '2025-01-01',
                        completionQuantity: '1000',
                        plannedQuantity: '2500',
                    },
                    {
                        orderStatus: '1',
                        plannedDate: '2025-01-01',
                        completionDate: '2025-01-01',
                        completionQuantity: '1000',
                        plannedQuantity: '2500',
                    },
                ]//计划
            }
        }
    },
    methods: {
        handleGetBack() {
            this.$emit('getBack');
        }
    },
    created() {

        mdApi.getProductOrders(this.details.id,((res)=>{
            if(res.code === 200){
                this.productDetailInfos.order = res.data;
            }
        }));
        mdApi.getProductPlans(this.details.id,((res)=>{
            if(res.code === 200){
                this.productDetailInfos.plan = res.data;
            }
        }));
    }
}
</script>

<style>

</style>